<template>
	<view>
		<view v-for="(item,index) in btnlist" @click="select(index)" :class="oncl==index?'list_type cols': 'list_type'">
			<image :src="item.imgs" mode=""></image>
			<text>{{item.name}}</text>
		</view>
		<button class="btn" type="default">绑定银行卡</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				oncl:'a',
				btnlist:[
					{
						"imgs":'../../../static/me/alipay.png',
						"name":'支付宝'
					},
					{
						"imgs":'../../../static/me/wxzf.png',
						"name":'微信'
					},
					{
						"imgs":'../../../static/me/ysf.png',
						"name":'云闪付'
					}
				]
			}
		},
		methods:{
			select(i){
				this.oncl=i
			},
		}
	}
</script>

<style>
	.list_type{
		width: 750rpx;
		height: 101rpx;
	}
	.list_type image{
		width: 50rpx;
		height: 50rpx;
		margin: 25rpx;
		float: left;
	}
	.list_type text{
		font-size: 25rpx;
		font-family: PingFang SC;
		line-height: 101rpx;
		font-weight: 500;
		color: #21201D;
		opacity: 1;
	}
	.cols{
		background: #F5F5F5;
	}
	.btn{
		width: 699rpx;
		height: 79rpx;
		background: linear-gradient(206deg, #FCCA22 0%, #FFE246 100%);
		opacity: 1;
		border-radius: 39rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		text-align: center;
		line-height: 79rpx;
		position: fixed;
		bottom: 14rpx;
		left: 25rpx;
	}
</style>
